<template>
  <div>
    <router-link to="/AllOrderList/nopayorder"></router-link>
    <div class="paylist">
      <van-icon name="balance-list-o" v-if="flag" class="kong" />
      <p v-if="flag">还没有相关订单</p>
    </div>
    <div class="list" v-for="item in orderLists" :key="item._id">
      <van-swipe-cell>
        <van-checkbox
          v-model="item.checked"
          style="height: 40px"
          checked-color="#0a589b"
          >订单编号:{{ item.order._id }}</van-checkbox
        >
        <template #right>
          <van-button
            square
            type="danger"
            text="删除"
            style="background: #0a589b; border: none"
            @click="delOrder(item.order._id)"
          />
        </template>
      </van-swipe-cell>
      <div class="listcon" v-for="pro in item.details" :key="pro._id">
        <!-- {{ pro }} -->
        <van-card
          :num="pro.quantity"
          :key="pro._id"
          :price="(pro.price / 100).toFixed(2)"
          :title="pro.product.name"
          :thumb="pro.product.coverImg"
        />
      </div>
    </div>
    <van-submit-bar
      :price="countPrice"
      button-text="继续付款"
      @submit="onSubmit"
      button-color="#0A589B"
    >
      <van-checkbox v-model="checked">全选</van-checkbox>
      <van-icon
        name="delete-o"
        class="delBtn"
        @click="delCheckOrder(selectProduct)"
      />
    </van-submit-bar>
  </div>
</template>

<script>
//引入获取订单详情接口
import {
  reqGetOrderDetailAPI,
  reqDelOrder,
  reqDelCheckedOrder,
} from "../../api/order";
import { Dialog, Toast } from "vant";
export default {
  props: ["payLists", "nopayLists"],
  data() {
    return {
      lists: [],
      id: "",
      orderLists: [],
      flag: false,
      selectProduct: [],
    };
  },
  methods: {
    //获取没有支付订单的详情 展示到页面
    getNoPayLists() {
      this.lists = this.nopayLists;
      //如果接受到的订单列表的长度为0，就展示空空如也
      setTimeout(() => {
        console.log(this.lists);
        console.log(this.lists.length);
        if (this.lists.length === 0) {
          this.flag = true;
        } else {
          //如果接受有订单 就进行循环遍历
          this.lists.forEach((lists) => {
            //根据订单id获取订单详情
            let id = lists._id;
            reqGetOrderDetailAPI(id).then((res) => {
              this.orderLists.push(res);
            });
          });
        }
      }, 500);
      console.log(this.orderLists);
    },
    //删除单个选中的订单
    delOrder(id) {
      Dialog.confirm({
        title: "删除订单",
        message: "确定删除该订单吗？",
      })
        .then(async () => {
          // on confirm
          await reqDelOrder(id);
          //判断lists中商品id和删除的id是否一致  一致就删除list中的数据
          this.orderLists.forEach((list, index) => {
            console.log(this.orderLists);
            if (list.order._id == id) {
              this.orderLists.splice(index, 1);
            }
          });
          console.log(this.orderLists);
        })
        .catch(() => {
          // on cancel
        });
    },

    //删除选中的订单
    delCheckOrder(ids) {
      if (ids.length == 0) {
        Toast("请选择删除的订单");
      } else {
        Dialog.confirm({
          title: "订单",
          message: "确定删除这些订单吗？",
        })
          .then(async () => {
            // on confirm
            const result = await reqDelCheckedOrder({ ids });
            console.log(result);
            for (let i = 0; i < ids.length; i++) {
              console.log("aaa");
              console.log(ids[i]);
              for (let j = 0; j < this.orderLists.length; j++) {
                console.log("bbb");
                console.log(this.orderLists[j].order._id);
                if (ids[i] == this.orderLists[j].order._id) {
                  console.log(ids[i], this.orderLists[j].order._id);
                  this.orderLists.splice(j, 1);
                  // j--;
                  break;
                }
              }
            }
          })
          .catch(() => {
            // on cancel
          });
      }
    },

    //点击继续付款跳转订单确认阶段
    onSubmit() {
      //传递参数
      const ids = this.selectProduct;
      console.log(ids);
      this.$router.push({
        name: "OrderList",
        params: {
          ids,
        },
      });
    },
  },
  // watch: {
  //   orderLists: {
  //     deep: true,
  //     immediate: true,
  //     handler(newvalue, old) {
  //       // console.log(newvalue, old);
  //       console.log("lists改变了");
  //       // this.delOrder(id);
  //     },
  //   },
  // },
  created() {
    this.getNoPayLists();
    console.log(this);
  },

  computed: {
    // 判断全选是否选中
    checked: {
      set(flag1) {
        //set发生改变 get立马拿到最新的值
        //给所有的商品添加一个checked属性，属性值为flag1
        this.orderLists.map((item) => this.$set(item, "checked", flag1));
      },
      get() {
        //如果购物车中没有数据 全选不选择
        if (this.orderLists.length == 0) {
          return false;
        } else {
          //当所有的商品被选中时，全选框也被选中
          return (
            this.orderLists.length ==
            this.orderLists.filter((item) => item.checked == true).length
          );
        }
      },
    },

    //计算商品的总价
    countPrice() {
      //用来存放总价
      let count = 0;
      const selectOrder = [];
      //先过滤所有选中的商品 拿到所有的选中的商品后 进行循环遍历 将他们的商品数量*商品价格相加
      this.orderLists
        .filter((item) => item.checked == true)
        .forEach((checkedOrder) => {
          checkedOrder.details.forEach((orderProduct) => {
            count += (orderProduct.price / 100) * orderProduct.quantity;
          });
          //所有选中商品的id 方便删除所有选中的商品
          selectOrder.push(checkedOrder.order._id);
          this.selectProduct = selectOrder;
        });
      return count * 100;
    },
  },
};
</script>

<style>
.list {
  /* height: 200px; */
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
.list p {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  color: #000;
}

.listcon {
  border: 1px solid #f2f2f2;
  margin-top: 10px;
}
.paylist {
  text-align: center;
  color: #443b31;
}
.kong {
  font-size: 150px;
  display: inline-block;
  margin: 50px auto;
}
.delBtn {
  font-size: 20px;
  margin-left: 10px;
}
</style>
